<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>企业名称预先核准申请书</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/my.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" src="js/jquery.flexText.min.js"></script>
    <script src="https://cdn.bootcss.com/json2/20160511/json2.min.js"></script>
    <script type="text/javascript" src="js/my.js"></script>

</head>

<body class="my-body">

    <div style="padding:0px;marging:0px;background-size: cover;overflow-y:visible;">
        <img class="col-xs-4 col-xs-offset-4 img-responsive my-gap-top" src="images/dfa8c6ef0acedc844c59669f4f24fe1a.png">
        <div class="section my-topsection">
            <div class="container" style="vertical-align:mid;">
                <div class="col-xs-12 text-center my-gap-bottom">
                    <!--h3> 企业名称预先核准申请书</h3-->
                </div>
            </div>
            <div class="container">
                <form id="naform" class="my-form" role="form" data-toggle="validator">
                    <div class="form-group my-form-group">
                        <label for="apply_name">预查企业名称</label>
                        <input type="text" name="apply_name" class="form-control my-input" id="apply_name">
                    </div>
                    <div class="form-group my-form-group">
                        <label for="apply_name2">备选企业字号</label>
                        <input type="text" name="apply_name2" class="form-control my-input" id="apply_name2">
                    </div>
                    <div class="form-group my-form-group">
                        <input type="text" name="apply_name3" class="form-control my-input" id="apply_name3">
                    </div>
                    <div class="form-group my-form-group">
                        <input type="text" name="apply_name4" class="form-control my-input" id="apply_name4">
                    </div>
                    <div class="form-group my-form-group wrap">
                        <label for="actual_address">实际经营地址</label>
                        <textarea id="actual_address" name="actual_address" class="form-control" style="font-size:18px;border-color: #5066b4;"></textarea>
                    </div>
                    <div class="form-group my-form-group wrap">
                        <label for="manage_range">经营范围</label>
                        <textarea id="manage_range" name="manage_range" class="form-control" style="font-size:18px;border-color: #5066b4;"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="register_money">注册资本</label>
                        <div class="input-group my-form-group">
                            <input type="number" id="register_money" name="register_money" class="form-control my-input">
                            <span class="input-group-addon">万元</span>
                        </div>
                    </div>
                    <div class="form-group my-form-group">
                        <label for="register_kink">注册公司类型</label>
                        <select id="register_kind" name="register_kind" class="selectpicker mycompany-select">
                            <option>有限责任公司</option>
                            <option>非公司企业法人</option>
                            <option>合伙企业</option>
                            <option>股份有限公司</option>
                            <option>企业非法人分支机构</option>
                            <option>个人独资企业</option>
                            <option>分公司</option>
                            <option>营业单位</option>
                        </select>
                    </div>
                    <hr>
                    <label class="my-gap-bottom">投资人信息</label>

                    <div class="row" style="font-size:14px;">
                        <div class="col-xs-3">名称</div>
                        <div class="col-xs-5">证件号码</div>
                        <div class="col-xs-3">投资比例</div>
                        <a href="javascript:delectAInvestor(1)" class="col-xs-1">&nbsp;</a>
                    </div>
                    <div id="investorlists" class="list-group my-list">
                        <!--a href="javascript:delectAInvestor(1)" class="col-xs-1">
                                <spanstyle="color:#ff000000"><i class='fa fa-minus-square'></i></span>
                            </a-->
                    </div>
                    <div class="clearfix">
                        <a id="addinvestorBtn" class="btn btn-success col-xs-6 col-xs-offset-3 my-gap-bottom">添加</a>
                    </div>
                    <hr class="my-gap-top">
                    <div class="form-group">
                        <label for="register_name">注册经办人姓名</label>
                        <input type="text" name="register_name" class="form-control my-input" id="register_name">
                    </div>
                    <div class="form-group">
                        <label for="register_phone">注册经办人电话</label>
                        <input type="text" name="register_phone" class="form-control my-input" id="register_phone">
                    </div>
                    <hr>
                    <div class="form-group my-form-group wrap">
                        <label for="apply_remark">备注</label>
                        <textarea id="apply_remark" name="apply_remark" class="form-control" style="font-size:18px;border-color: #5066b4;"></textarea>
                    </div>
                    <hr>
                    <div class="row text-center">
                        <span style="color:red;"><h3>重要提示</h3></span>
                        <div class="clearfix" style="text-align:left;font-size:14px;border-color: #5066b4;padding:15px;">
                            <p>(1)由于上海地区企业数量众多，为了帮助客户快速通过工商预查名，建议公司名称尽量采用“生僻”字号！
                                <br> (2)经营范围字符130字为上限（其中包括标点符号
                                <br> (3)请在有效期内完善“工商注册面签”信息
                                <br> (4)如有任何问题请致电岗位服务电话021-57320084
                            </p>
                        </div>
                    </div>
                    <button id="submitBtn" class="btn btn-primary col-xs-12 my-gap-bottom" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>提交申请中">申请</button>
                </form>

            </div>
        </div>
    </div>
    <div class="modal fade" id="addinvestorpanel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only"></span>
                    </a>
                    <h4 id="mysetTitle">新增投资人</h4>

                </div>
                <div class="modal-body">
                    <form class="my-form" role="form">
                        <div class="form-group my-form-group">
                            <label for="qygd_name">名称或姓名</label>
                            <input type="text" name="qygd_name" class="form-control my-input" id="qygd_name">
                        </div>
                        <div class="form-group my-form-group my-gap-bottom" style="font-size:18px;">
                            <span>职务</span>
                            <select id="qygd_jobtitle" name="qygd_jobtitle" class="col-xs-12">
                                <option>法人</option>
                                <option>股东</option>
                            </select>
                        </div>
                        <div class="form-group my-form-group">
                            <label for="qygd_idnumber">证件号</label>
                            <input type="text" name="qygd_idnumber" class="form-control my-input" id="qygd_idnumber">
                        </div>

                        <div class="form-group my-form-group">
                            <label for="qygd_investment">投资金额</label>
                            <input id="qygd_investment" type="number" name="qygd_investment" class="form-control my-input">
                            <span>万元</span>
                        </div>
                        <label>投资人身份证</label>
                        <div class="container-fluid">
                            <div class="row">
                                <a class="col-xs-4" href="javascript:uploadImgWithName('#qygd_pic1','#qygd_pic1_img')" style="border:0px solid #000">
                                    <img id="qygd_pic1_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                                </a>
                                <a class="col-xs-4" href="javascript:uploadImgWithName('#qygd_pic2','#qygd_pic2_img')" style="border:0px solid #000">
                                    <img id="qygd_pic2_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                                </a>
                                <a class="col-xs-4" href="javascript:uploadImgWithName('#qygd_pic3','#qygd_pic3_img')" style="border:0px solid #000">
                                    <img id="qygd_pic3_img" src="images/picframe.svg" width="100" height="100" class="img-responsive my-picbackground my-gap-right" style="border-radius: 8px;background-color: #E5E5E4;border: 1px solid #d3d3d3;">
                                </a>
                            </div>
                            <div class="row">
                                <label class="col-xs-4" style="font-size:14px;font-weight:normal">正面</label>
                                <label class="col-xs-4" style="font-size:14px;font-weight:normal">反面</label>
                                <label class="col-xs-4" style="font-size:14px;font-weight:normal">证件照</label>
                            </div>
                        </div>
                        <input type="hidden" id="qygd_pic1">
                        <input type="hidden" id="qygd_pic2">
                        <input type="hidden" id="qygd_pic3">
                        <div class="container">
                            <a href="javascript:onInvestorOKHandler()" class="btn btn-success col-xs-12 my-gap-top" style="font-size:22px;padding:5px;">确定</a>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>
    <script type="text/javascript">
        var investorAry = [];
        var curSelect = null;
        var isAddMode = true;
        var isFormValidator = false;



        function addAinvestorToList(data, adddata = true) {
            var rsstr = '<a href="javascript:editInvestor(' + data["order"] + ')" class="list-group-item my-list-item"><div class="col-xs-3"><span style="font-size:14px;">' +
                data["qygd_name"] +
                '</span></div><div class="col-xs-5"><span style="font-size:14px;">' +
                data["qygd_idnumber"] +
                '<span></div><div class="col-xs-3"><span style="font-size:14px;">' +
                calculate_qygd_investment(data["qygd_investment"]) +
                '</span></div></a>';
            $("#investorlists").append(rsstr);
            if (adddata)
                investorAry.push(data);
        }

        function calculate_qygd_investment(investment) {
            var totalInvestment = Number($("#register_money").val());
            if (Number(investment)) {
                var rsstr = Math.floor(investment / totalInvestment * 10000) / 100;
                return rsstr + "%";
            }
            return "0%";
        }

        function editInvestor(index) {
            debugger;
            if (investorAry.length > index) {
                var investor = curSelect = investorAry[index];
                $("#qygd_name").val(investor["qygd_name"]);
                $("#qygd_idnumber").val(investor["qygd_idnumber"]);
                $("#qygd_investment").val(investor["qygd_investment"]);
                $("#qygd_jobtitle").val(investor["qygd_jobtitle"]);
                $("#qygd_pic1" + "_img").attr("src", getRemotePic(investor["qygd_pic1"]));
                $("#qygd_pic2" + "_img").attr("src", getRemotePic(investor["qygd_pic2"]));
                $("#qygd_pic3" + "_img").attr("src", getRemotePic(investor["qygd_pic3"]));
                //这里需要服务器上图片显示的方法
                isAddMode = false;
                $("#addinvestorpanel").modal("toggle");
            }
        }

        function onInvestorOKHandler() {
            if (isAddMode) {
                var newdata = {};
                newdata["order"] = investorAry.length;
                newdata["qygd_name"] = $("#qygd_name").val();
                newdata["qygd_idnumber"] = $("#qygd_idnumber").val();
                newdata["qygd_investment"] = $("#qygd_investment").val();
                newdata["qygd_jobtitle"] = $("#qygd_jobtitle").val();
                newdata["qygd_pic1"] = $("#qygd_pic1").val();
                newdata["qygd_pic2"] = $("#qygd_pic2").val();
                newdata["qygd_pic3"] = $("#qygd_pic3").val();
                curSelect = null;
                addAinvestorToList(newdata);
            } else {
                if (curSelect) {
                    curSelect["qygd_name"] = $("#qygd_name").val();
                    curSelect["qygd_idnumber"] = $("#qygd_idnumber").val();
                    curSelect["qygd_investment"] = $("#qygd_investment").val();
                    curSelect["qygd_jobtitle"] = $("#qygd_jobtitle").val();
                    curSelect["qygd_pic1"] = $("#qygd_pic1").val();
                    curSelect["qygd_pic2"] = $("#qygd_pic2").val();
                    curSelect["qygd_pic3"] = $("#qygd_pic3").val();
                    //
                    var htmlstr = "";
                    $("#investorlists").html(htmlstr);
                    for (var i = 0; i < investorAry.length; i++) {
                        addAinvestorToList(investorAry[i], false);
                    }
                }
            }
            $("#addinvestorpanel").modal("hide");
        }
        var thebillid = 0;

        function getApplyFromJSON() {
            var jsonobj = {};
            var mywx = myweixin;
            thebillid = Date.parse(new Date());
            jsonobj["wx_openid"] = mywx.openid;
            jsonobj["id"] = thebillid;
            jsonobj["apply_name"] = $("#apply_name").val();
            jsonobj["apply_name2"] = $("#apply_name2").val();
            jsonobj["apply_name3"] = $("#apply_name3").val();
            jsonobj["apply_name4"] = $("#apply_name4").val();
            jsonobj["actual_address"] = $("#actual_address").val();
            jsonobj["manage_range"] = $("#manage_range").val();
            jsonobj["register_money"] = $("#register_money").val();
            jsonobj["register_kind"] = $("#register_kind").val();
            jsonobj["register_name"] = $("#register_name").val();
            jsonobj["register_phone"] = $("#register_phone").val();
            jsonobj["apply_remark"] = $("#apply_remark").val();
            jsonobj["arr"] = [];
            for (var i = 0; i < investorAry.length; i++) {
                var ainvestor = investorAry[i];
                if (ainvestor["qygd_jobtitle"] == "法人") {
                    jsonobj["tzfr_name"] = $("#qygd_name").val();
                    jsonobj["tzfr_idnumber"] = $("#qygd_idnumber").val();
                    jsonobj["tzfr_investment"] = $("#qygd_investment").val();
                    jsonobj["tzfr_pic1"] = $("#qygd_pic1").val();
                    jsonobj["tzfr_pic2"] = $("#qygd_pic2").val();
                    jsonobj["tzfr_pic3"] = $("#qygd_pic3").val();
                } else {
                    jsonobj["arr"].push(ainvestor);
                }
            }
            debugger;
            var jstr = JSON.stringify(jsonobj);
            console.log(jstr);
            return jstr;
        }
        var myvalidator = null;
        $(document).ready(function() {
            $('textarea').flexText();
            var myapi = restapis;
            //Reference from http://www.cnblogs.com/hwaggLee/p/6565604.html
            myvalidator = $('#naform').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    apply_name: {
                        validators: {
                            message: '验证企业名称失败',
                            notEmpty: {
                                message: '输入验证码',
                            },
                            threshold: 6,
                            remote: { //ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
                                url: 'json/ee_nameapply_verfiy.json', //验证地址
                                message: '企业名称已使用', //提示消息
                                delay: 2000, //每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                                type: 'GET', //请求方式
                                /**自定义提交数据，默认值提交当前input value
                                 * 
                                 */
                                data: function(validator) {
                                    return {
                                        apply_name: $('#apply_name').val()
                                    };
                                }
                            }
                        }
                    },
                    apply_name2: {
                        validators: {
                            message: '验证企业名称失败',
                            notEmpty: {
                                message: '输入验证码',
                            },
                            threshold: 6,
                            remote: {
                                url: 'json/ee_nameapply_verfiy.json',
                                message: '企业名称已使用',
                                delay: 2000,
                                type: 'GET',
                                data: function(validator) {
                                    return {
                                        apply_name2: $('#apply_name2').val()
                                    };
                                }
                            }
                        }
                    },
                    apply_name3: {
                        validators: {
                            message: '验证企业名称失败',
                            notEmpty: {
                                message: '输入验证码',
                            },
                            threshold: 6,
                            remote: {
                                url: 'json/ee_nameapply_verfiy.json',
                                message: '企业名称已使用',
                                delay: 2000,
                                type: 'GET',
                                data: function(validator) {
                                    return {
                                        apply_name3: $('#apply_name3').val()
                                    };
                                }
                            }
                        }
                    },
                    apply_name4: {
                        validators: {
                            message: '验证企业名称失败',
                            notEmpty: {
                                message: '输入验证码',
                            },
                            threshold: 6,
                            remote: {
                                url: 'json/ee_nameapply_verfiy.json',
                                message: '企业名称已使用',
                                delay: 2000,
                                type: 'GET',
                                data: function(validator) {
                                    return {
                                        apply_name4: $('#apply_name4').val()
                                    };
                                }
                            }
                        }
                    },
                    register_money: {
                        validators: {
                            message: '请输入正确的金额',
                            notEmpty: {
                                message: '投资金额必须填写',
                            }
                        }
                    },
                    register_name: {
                        validators: {
                            message: '请正确填写企业联系人',
                            notEmpty: {
                                message: '企业联系人必须填写',
                            }
                        }
                    },
                    register_phone: {
                        validators: {
                            message: '请正确填写企业联系人电话',
                            notEmpty: {
                                message: '企业联系人电话必须填写',
                            }
                        }
                    },
                    actual_address: {
                        validators: {
                            message: '请正确填写实际经营地址',
                            notEmpty: {
                                message: '实际经营地址必须填写',
                            }
                        }
                    },
                    manage_range: {
                        validators: {
                            message: '请正确填经营范围',
                            notEmpty: {
                                message: '经营范围必须填写',
                            }
                        }
                    }
                }
            })

            myvalidator.on('success.form.bv', function(e) {
                debugger;
                e.preventDefault();
                //alert("验证通过");
                var thesubmitbtn = $("#submitBtn");
                var myvalid = myvalidator.isValid;
                debugger;
                if (!isFormValidator) {
                    debugger;
                    if ($("#apply_name")["0"].validity.valid &&
                        $("#apply_name2")["0"].validity.valid &&
                        $("#apply_name3")["0"].validity.valid &&
                        $("#apply_name4")["0"].validity.valid &&
                        $("#register_money")["0"].validity.valid &&
                        $("#register_name")["0"].validity.valid &&
                        $("#register_phone")["0"].validity.valid
                    ) {
                        isFormValidator = true;
                    } else {
                        alert("请完整填写表格并保证正确");
                        return;
                    }
                }
                if (investorAry.length <= 0) {
                    alert("请填写法人和投资人信息");
                    return;
                } else {
                    for (var i = 0; i < investorAry.length; i++) {
                        var node = investorAry[i];
                        if (node["qygd_jobtitle"] == "法人") {
                            break;
                        }
                    }
                    if (i == investorAry.length) {
                        alert("请填写法人信息");
                        return;
                    }
                }
                thesubmitbtn.button('loading');
                myapi.request("insertYCM", null, getApplyFromJSON(), function(result) {
                    if (result.result == 2) {
                        debugger;
                        window.location = "ee_progress.html?id=" + result.id;
                    }
                }, function(e) {
                    alert("提交时发生错误!");
                });
                isFormValidator = true;
            });
            $("#addinvestorBtn").on("click", function() {
                isAddMode = true;
                $("#qygd_name").val("");
                $("#qygd_idnumber").val("");
                $("#qygd_investment").val("");
                $("#qygd_jobtitle").val("法人");
                $("#qygd_pic1" + "_img").attr("src", "images/picframe.svg");
                $("#qygd_pic2" + "_img").attr("src", "images/picframe.svg");
                $("#qygd_pic3" + "_img").attr("src", "images/picframe.svg");
                //setFromDisabled("naform", true);
                $("#addinvestorpanel").modal("toggle");
            });
            //
            var mywx = myweixin;
            mywx.initial();
        });

    </script>
</body>

</html>
